<template>
  <el-dialog
      :model-value="visible"
      title="📚 今日复习提醒"
      width="600px"
      :before-close="handleClose"
      custom-class="reminder-modal"
      @close="handleClose"
      :close-on-click-modal="false"
  >
    <div class="reminder-content">
      <el-alert
          title="根据艾宾浩斯遗忘曲线，今天有以下笔记需要复习："
          type="info"
          :closable="false"
          class="reminder-alert"
      />

      <div class="review-list" v-if="reviews.length > 0">
        <el-card
            v-for="item in reviews"
            :key="`${item.id}-${item.stage}`"
            class="review-item"
            shadow="hover"
            :class="{ 'completed-item': completingId === `${item.id}-${item.stage}` }"
        >
          <div class="item-header">
            <div class="item-title">
              <el-icon class="book-icon"><Notebook /></el-icon>
              <el-link
                  :href="item.yuqueUrl"
                  target="_blank"
                  type="primary"
                  :underline="false"
                  class="note-link"
              >
                {{ item.title }}
              </el-link>
            </div>
            <el-tag
                :type="getStageType(item.stage)"
                class="stage-tag"
            >
              {{ getStageText(item.stage) }}
            </el-tag>
          </div>

          <div class="item-meta">
            <div class="meta-item">
              <el-icon><Folder /></el-icon>
              <span class="meta-text">{{ item.folder || '未分类' }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Calendar /></el-icon>
              <span class="meta-text">创建时间: {{ formatDate(item.createdAt) }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span class="meta-text">计划时间: {{ formatDateTime(item.scheduledDate) }}</span>
            </div>
          </div>

          <div class="item-actions">
            <el-button
                type="primary"
                size="small"
                @click="handleComplete(item.id, item.stage)"
                :icon="Check"
                class="action-btn"
                :loading="completingId === `${item.id}-${item.stage}`"
                :disabled="completingId !== null"
            >
              {{ completingId === `${item.id}-${item.stage}` ? '标记中...' : '标记完成' }}
            </el-button>
            <el-button
                type="success"
                size="small"
                @click="openYuqueLink(item.yuqueUrl)"
                :icon="View"
                class="action-btn"
                :disabled="completingId !== null"
            >
              前往复习
            </el-button>
          </div>
        </el-card>
      </div>

      <el-empty
          v-else
          description="今天没有需要复习的笔记，继续保持！"
          :image-size="200"
          class="empty-state"
      />
    </div>

    <template #footer>
      <div class="footer-content">
        <div class="footer-stats" v-if="reviews.length > 0">
          剩余 {{ reviews.length }} 条复习任务
        </div>
        <el-button @click="handleClose" class="footer-btn">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>

import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { completeReview } from '@/api/notes'

export default {
  name: 'ReminderModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    reviews: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'complete'],
  data() {
    return {
      completingId: null // 正在标记的复习项ID
    }
  },
  methods: {
    // 处理关闭
    handleClose() {
      this.$emit('close')
    },

    // 处理复习完成
    async handleComplete(noteId, stage) {
      if (this.completingId) return // 防止重复点击

      this.completingId = `${noteId}-${stage}`

      try {
        console.log('标记完成:', { noteId, stage })
        const response = await completeReview(noteId, { stage })

        if (response.success) {
          // 通知父组件更新
          this.$emit('complete', noteId, stage)
        } else {
          ElMessage.error('标记失败: ' + (response.message || '未知错误'))
        }
      } catch (error) {
        console.error('标记完成失败:', error)
        ElMessage.error('标记完成失败: ' + (error.message || '网络错误'))
      } finally {
        this.completingId = null
      }
    },

    // 打开语雀链接
    openYuqueLink(url) {
      window.open(url, '_blank')
    },

    // 获取复习阶段文本
    getStageText(stage) {
      const stages = {
        1: '第一次复习 (第2天)',
        2: '第二次复习 (第9天)',
        3: '第三次复习 (第23天)',
        4: '第四次复习 (第53天)'
      }
      return stages[stage] || `第 ${stage} 次复习`
    },

    // 获取阶段标签类型
    getStageType(stage) {
      const types = {
        1: 'primary',
        2: 'success',
        3: 'warning',
        4: 'danger'
      }
      return types[stage] || 'info'
    },

    // 格式化日期
    formatDate(date) {
      return dayjs(date).format('YYYY-MM-DD')
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      return dayjs(dateTime).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

<style lang="scss" scoped>
.reminder-content {
  max-height: 60vh;
  overflow-y: auto;
}

.reminder-alert {
  margin-bottom: 20px;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-item {
  transition: all 0.3s ease;
  border-radius: 8px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.completed-item {
    background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
    border: 1px solid #91d5ff;
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.book-icon {
  color: #409eff;
  font-size: 18px;
  flex-shrink: 0;
}

.note-link {
  font-weight: 500;
  font-size: 14px;
}

.stage-tag {
  flex-shrink: 0;
  font-weight: 500;
}

.item-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 12px;
}

.meta-text {
  line-height: 1.4;
}

.item-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.action-btn {
  font-weight: 500;
}

.empty-state {
  padding: 40px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-stats {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.footer-btn {
  min-width: 80px;
}

// 响应式设计
@media (max-width: 768px) {
  .item-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .item-meta {
    flex-direction: column;
    gap: 8px;
  }

  .item-actions {
    justify-content: stretch;

    .el-button {
      flex: 1;
    }
  }

  .footer-content {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .footer-stats {
      text-align: center;
    }
  }
}
</style>